<template>
  <el-main class="main-content">
    <ShopCarousel />

    <ShopProducts
      :title="'最新商品'"
      :productType="newProduct.typeKey"
      :productSpan="productSpan"
    />

    <ShopProducts
      :title="'推荐商品'"
      :productType="hostProduct.typeKey"
      :productSpan="productSpan"
    />
  </el-main>
</template>
<script>
import ShopCarousel from "./ShopCarousel.vue";
import ShopProducts from "../ShopProducts.vue";
export default {
  name: "ShopMain",
  components: {
    ShopCarousel,
    ShopProducts,
  },
  computed: {
    productSpan() {
      if (this.isMobile) {
        return 24; // 小屏幕每行显示1个商品
      } else if (window.innerWidth <= 992) {
        return 12; // 中等屏幕每行显示2个商品
      } else {
        return 6; // 大屏幕每行显示4个商品
      }
    },
  },
  data() {
    return {
      newProduct: { typeKey: 0, typeValue: "最新商品" },
      hostProduct: { typeKey: 1, typeValue: "最热商品" },
      AllProduct: { typeKey: 2, typeValue: "全部商品" },
    };
  },
  methods: {},
  mounted() {
    // this.loadGoodsPageQuery();
  },
};
</script>